<!-- -->
<template>
  <div id='activecode'>
    <div class="ebtop">
        <div class="left">激活码明细</div>
    </div>
    <div class="isfixed">
        <!-- 搜索匹配 -->
        <div class="search">
            <!-- 按日期搜索 -->
            <div class="box2">
                <div class="block">
                  <span class="demonstration">查询日期</span>
                  <el-date-picker
                    size=small
                    v-model="value4"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
            </div>
            <div class="box3" @click="submitmes"><i class="iconfont icon-sousuo"></i></div>
        </div>
        <table class="navth" border="1" width=100% cellspacing=0 rules=none frame=void id="searchBar">
          <tr>
            <th width=15%>记录编号</th>
            <th width=20%>记录说明</th>
            <th width=20%>变动数额</th>
            <th width=20%>激活码余额</th>
            <th width=25%>交易时间</th>
          </tr>
        </table>
    </div>

    <div class="gradesell">
          <div class="meslist">
             <table border="1" width=100% cellspacing=0 rules=none frame=void>
                <tr v-for="(item,index) in message" :key="index" class="nav">
                    <td width=15%>{{item.id}}</td>
                    <td width=20%>{{item.bonus_log}}</td>
                    <td width=20% style="color:rgba(224,3,0,1)">{{item.bonus_num}}</td>
                    <td width=20% style="color:rgba(224,3,0,1)">{{item.money}}</td>
                    <td width=25%>{{item.add_time}}</td>
                </tr>
            </table>
          </div>
        <div class="mesnull">暂无更多数据...</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "activecode",
  data() {
    return {
      value4: "",
      message: []
    };
  },
  mounted() {
    this.loadmes();
  },
  methods: {
    loadmes() {
      this.axios
        .post("Info/jihuo_info")
        .then(({ data }) => {
          console.log(data);
          this.message = data.ebuc_log;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    submitmes() {
      const firstValue = this.changeTime(this.value4[0]);
      const secondValue = this.changeTime(this.value4[1]);
      this.axios.post("Info/jihuo_info", {
          start_time: firstValue,
          end_time: secondValue
        })
        .then(({ data }) => {
          console.log(data);
          this.message = data.ebuc_log;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang='scss' scoped>
#activecode {
  height: 100%;
  min-width: 1000px;
  min-height: 600px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 20px;
  right: 20px;
  padding-top: 170px;
  box-sizing: border-box;
  overflow: auto;
  .ebtop {
    // width: 100%;
    height: 55px;
    padding: 0 83px 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
    box-shadow: 0 -10px #f2f2f2;
    position: fixed;
    top: 50px;
    right: 20px;
    left: 270px;
    background-color: #fff;
    z-index: 99;
    .left {
      font-size: 13px;
      font-family: MicrosoftYaHei-Bold;
      color: rgba(0, 0, 0, 1);
      font-weight: 700;
      line-height: 65px;
    }
  }
  .isfixed {
    padding: 0 20px;
    position: fixed;
    top: 100px;
    right: 20px;
    left: 270px;
    background-color: #fff;
    .search {
      display: flex;
      justify-content: flex-start;
      padding-top: 15px;
      padding-left: 40px;
      .box1 {
        margin-right: 60px;
      }
      .box3 {
        cursor: pointer;
        width: 50px;
        height: 28px;
        margin-left: 17px;
        // margin-top: 5px;
        background: rgba(224, 3, 0, 1);
        border-radius: 3px;
        text-align: center;
        .icon-sousuo {
          line-height: 30px;
          color: #fff;
        }
      }
    }
    .navth {
      margin-top: 10px;
      line-height: 45px;
      background-color: rgba(242, 242, 242, 1);
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
    }
  }
  .gradesell {
    // height: 100%;
    margin: -4px 20px;
    // border-bottom:1px solid rgba(153,153,153,1);
    .nav {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      line-height: 45px;
      text-align: center;
      border-bottom: 1px solid rgba(221, 221, 221, 1);
    }
    .mesnull {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      line-height: 50px;
      text-align: center;
    }
  }
  .meslist tr {
    &:hover {
      background-color: #f0f0f0;
    }
  }
}
</style>